<template>
    <div>
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="select_nav_title">
                        <div class="title">{{title}}</div>
                        <div class="order_search">
                            <input type="text" v-model="query.keyword" placeholder="输入商品标题或订单号进行搜索" />
                            <el-button icon="el-icon-search" circle @click="searchOrder"></el-button>
                        </div>
                    </div>
                    <div class="order_content" id="ddorder">
                        <div class="order_list" v-for="(order,index) in data.data" :key="index">
                            <div class="order_top">
                                <div class="order_desc">
                                    <div class="label">常规</div>
                                    <div>订单号：{{order.order_sn}}</div>
                                    <div>订单生成时间：{{order.create_time}}</div>
                                </div>
                                <div>订单状态：
                                    <span v-if="order.state == 0 && order.status == 0">待审核</span>
                                    <span v-else-if="order.state == 1 && order.status == 0">待支付</span>
                                    <span v-else-if="order.status == 1">已支付</span>
                                    <span v-else-if="order.status == -1">已取消</span>
                                </div>
                            </div>
                            <div class="order_info">
                                <div class="order_goods_content">
                                    <div class="order_goods_list" v-for="(goods,goodsIndex) in order.item" :key="goodsIndex">
                                        <div class="order_goods_info">
                                            <div class="order_goods_img">
                                                <img :src="$commonImageUrl(goods.goods_image)" />
                                            </div>
                                            <div class="goods_spec_info">
                                                <div class="goods_name">{{goods.goods_title}}</div>
                                                <div>型号：{{goods.goods_sku_name}}</div>
                                                <div>规格：{{goods.goods_sku_text}}</div>
                                                <div>备注：{{goods.goods_remark}}</div>
                                            </div>
                                        </div>
                                        <div class="company_name">
                                            {{goods.factory_name}}
                                        </div>
                                        <div class="goods_price">￥{{goods.goods_price}}</div>
                                        <div class="car_num_operate">{{goods.goods_num}}</div>
                                    </div>
                                    <div class="mark" v-if="order.remark">
                                        备注：{{ order.remark }}
                                    </div>
                                </div>
                                <div class="list_count_price">
                                    <div>￥{{order.total_amount}}</div>
                                    <div class="express_price">(含运费￥{{order.dispatch_amount}})</div>
                                </div>
                                <div class="operate_delete">
                                    <div class="now_pay" @click="onSumbitDelivery(order)" v-if="order.state == 0">提醒审核</div>
                                    <div class="now_pay" @click="openReceiptDialog(order)" v-if="order.state == 1 && order.status == 0">立即付款</div>
                                    <div class="now_pay" v-if="order.state == 1 && order.status == 1">查看订单</div>
                                    <div class="operate_more">
                                        <div class="more">
                                        更多<span class="el-icon-caret-right"></span>
                                        </div>
                                        <ul class="gdxx">
                                        <li><nuxt-link  :to="path + 'Show/' + order.id">订单详情</nuxt-link></li>
                                        <li><a href="#">取消订单</a></li>
                                        <li><a href="#">联系客服</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>            
                    </div>
                    <Custom-pagination :total="data.total" :page.sync="query.page" :pageSize.sync="query.pageSize" @pagination="LoadDataFun" :hidden="pageHidden"></Custom-pagination>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>
        <el-dialog
            title="上传付款回执"
            :visible.sync="dialogReceiptVisible"
            width="35%"
            :close-on-click-modal="false"
            top="2%">
            <div class="dialog-content payment-receipt">
                <div class="title">企业信息</div>
                <div class="item">
                    <p><span>账号名称</span>北京鑫康辰医学科技发展有限公司</p>
                    <p><span>开户银行</span>中国农业银行北京经济技术开发区支行</p>
                    <p><span>银行账号</span>11221201040008406</p>
                </div>
                <div class="title">订单信息</div>
                <div class="item">
                    <p><span>订单详情</span>同种异体肌腿 x10EH复合材料(颅领优) x10</p>
                    <p><span>订单号</span>220109193821-OTUK-1-0114674</p>
                    <p><span>订单时间</span>2022-03-1515:29:02</p>
                    <p><span>订单总额</span>￥5700.00</p>
                </div>
                <div class="title">支付信息</div>
                <el-form ref="form" :model="form" label-width="150px" label-position="left">
                    <el-form-item label="使用余额支付">
                        <el-input v-model="form.balance" placeholder=""></el-input>
                        <span class="el-icon-warning text-grey"></span> <span class="text-grey">账户剩余余额: ￥4150.00</span>
                    </el-form-item>
                    <el-form-item label="还需付款金额">
                        <el-input v-model="form.name" placeholder="￥5700.00"></el-input>
                    </el-form-item>
                    <el-form-item label="上传付款回执">
                        <CustomImageUpload v-model="form.remaining"></CustomImageUpload>
                        <span class="text-grey">支持pdf、jpg、png格式文件大小不超过5MB</span>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-main" @click="onSubmit">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import api from "@/api/order"
export default {
    props: {
        //标题
        title: {
            type: String,
            default:"全部订单",
        },
        data: {
            type: Object,
            default: {
                total: 0,
                data: []
            }
        },
        query: {
            type: Object,
            default: {
                page: 1,
                pageSize: 8,
                keyword: ""
            }
        },
        pageHidden: {
            type: Boolean,
            default: true
        },
        LoadDataFun: {
            type: Function,
            required: true
        },
        path: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            dialogReceiptVisible: false,
            form: {}
        }
    },
    methods: {
        // 打开提交回执单的窗口
        openReceiptDialog: function (order) {
            // let input = {
            //     id: order.id,
            // }
            // api.GetOrderInfo(input)
            //     .then((res) => {
            //         this.form = res.data;
            //         this.dialogReceiptVisible = true;
            //     })
            var input = {
                id: order.id,
                money: 0,
                receipt: "/uploads/20231024/741870b3d2acb362c13a79fd4744ffa5.png",
                price: 169
            }
            // 支付接口
            api.OrderPay(input)
                .then((res) => {
                    this.$message.success(res.msg);
                })
                .catch((err) => {

                })
        },
        onSubmit: function () {
            
        },
        // 搜索订单
        searchOrder: function () {
            this.LoadDataFun();
        },
        //提醒发货
        onSumbitDelivery(order) { 
            this.$confirm('订单编号：' + order.order_sn, '提醒发货', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                let input = {
                    id: order.id
                };
                api.Delivery(input).then((res) => { 
                    this.$message({
                        type: 'success',
                        message: res.msg
                    });
                })
            }).catch(() => {
                      
            });
        },
    }
}
</script>